<template>
    <div class="container addmusic loading">
        <main  class="table-div">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
              <el-form-item label="角色名称" prop="rolename">
                <el-input readonly v-model="rolename"></el-input>
              </el-form-item>
              <el-form-item label="权限树" prop="pid">
                <el-tree
                  ref="tree"
                  :data="treeData.data"
                  :default-checked-keys="treeData.checkedData"
                  :props="treeData.defaultProps"
                  accordion
                  node-key="id"
                  show-checkbox
                  check-strictly
                  @check="upPid"
                  @check-change="upPcid"
                  :highlight-current='true'>
                </el-tree>
              </el-form-item>
              <el-form-item>
                <el-button  type="primary" @click="submitBind('ruleForm')">绑定权限</el-button>
              </el-form-item>
            </el-form>
        </main>
    </div>
</template>

<script>
import { getPermissionTreeByRole, bindPermissionToRole } from '@/api/permission'

export default {
  data () {
    return {
      id: '',
      rolename: '',
      pcids: [],
      form: {
        ids: '',
        rid: ''
      },
      rules: {

      },
      treeData: {
        data: [],
        checkedData: [],
        defaultProps: {
          children: 'nodes',
          label: 'text'
        }
      }
    }
  },
  components: {
  },
  methods: {
    getTreeData (id) {
      getPermissionTreeByRole({ rid: id }).then(data => {
        if (data.result === 1) {
          this.treeData.data = data.data
          this.maptree(data.data)
        }
      })
    },
    maptree (treeobjectArray) {
      treeobjectArray.map(item => {
        if (item.state && item.state.checked) this.treeData.checkedData.push(item.id)
        if (item.nodes) this.maptree(item.nodes)
      })
    },
    mapalltree (treeobjectArray) {
      treeobjectArray.map(item => {
        this.pcids.push(item.id)
        if (item.nodes) this.mapalltree(item.nodes)
      })
    },
    upPcid (...data) {
      var oldcheckeds = this.$refs.tree.getCheckedKeys()
      var pcids
      this.pcids = []
      var self = this
      var treeArr = [data[0]]
      this.mapalltree(treeArr)
      // console.log(oldcheckeds)
      // console.log(this.pcids)
      if (data[1]) {
        pcids = Array.from(new Set([...this.pcids, ...oldcheckeds]))
      } else {
        pcids = Array.from(new Set([...oldcheckeds].filter(v => !self.pcids.includes(v))))
      }
      // console.log(pcids)
      this.$refs.tree.setCheckedKeys(pcids)
    },
    upPid (...data) {
      this.form.ids = data[1].checkedKeys.join(',')
    },
    submitBind (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          bindPermissionToRole(this.form).then((data) => {
            if (data.result === 1) {
              setTimeout(() => {
                this.$router.replace({ name: 'RoleList', params: { page: this.oldPage }})
              }, 1000)
            }
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.form.rid = this.id = this.$route.params.id
    this.rolename = this.$route.params.rolename
    this.oldPage = this.$route.params.page ? this.$route.params.page : ''
  },
  beforeMount () {
    this.getTreeData(this.id)
  },
  mounted () {

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#fff;
$dark_gray:#889aa4;
$light_gray:#eee;
.table-div{
    width:90%;
    margin: 20px auto
}
.title{
    width:90%;
    margin: 10px auto;
    .search-div,.row-div{
      float: left;
    }
    .search-div{
      width: 200px;
      margin-right: 20px
    }
}
.el-upload-list__item{
  height:auto !important;
}
</style>
